<%include top.ejs %>
<%include left.ejs %>  
<script type="text/javascript">
window.onload = function () {
	var oBtnLeft = document.getElementById("goleft");
	var oBtnRight = document.getElementById("goright");
	var oDiv = document.getElementById("indexmaindiv");
	var oDiv1 = document.getElementById("maindiv1");
	var oUl = oDiv.getElementsByTagName("ul")[0];
	var aLi = oUl.getElementsByTagName("li");
	var now = -4 * (aLi[0].offsetWidth + 20);
	oUl.style.width = aLi.length * (aLi[0].offsetWidth + 20) + 'px';
	oBtnRight.onclick = function () {
		var n = Math.floor((aLi.length * (aLi[0].offsetWidth + 20) + oUl.offsetLeft) / aLi[0].offsetWidth);

		if (n <= 4 ) {
			move(oUl, 'left', 0);
		}
		else {
			move(oUl, 'left', oUl.offsetLeft + now);
		}
	}
	oBtnLeft.onclick = function () {
		var now1 = -Math.floor((aLi.length / 4)) * 4 * (aLi[0].offsetWidth + 20);

		if (oUl.offsetLeft >= 0) {
			move(oUl, 'left', now1);
		}
		else {
			move(oUl, 'left', oUl.offsetLeft - now);
		}
	}
	var timer = setInterval(oBtnRight.onclick, 5000);
	oDiv.onmouseover = function () {
		clearInterval(timer);
	}
	oDiv.onmouseout = function () {
		timer = setInterval(oBtnRight.onclick, 5000);
	}

};

function getStyle(obj, name) {
	if (obj.currentStyle) {
		return obj.currentStyle[name];
	}
	else {
		return getComputedStyle(obj, false)[name];
	}
}

function move(obj, attr, iTarget) {
	clearInterval(obj.timer)
	obj.timer = setInterval(function () {
		var cur = 0;
		if (attr == 'opacity') {
			cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
		}
		else {
			cur = parseInt(getStyle(obj, attr));
		}
		var speed = (iTarget - cur) / 4;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if (iTarget == cur) {
			clearInterval(obj.timer);
		}
		else if (attr == 'opacity') {
			obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
			obj.style.opacity = (cur + speed) / 100;
		}
		else {
			obj.style[attr] = cur + speed + 'px';
		}
	}, 30);
}  
</script>
<style>
ul, ol{list-style:none;margin:0px;padding:0px;}
li{list-style:none outside none;}

/*首页*/
div.indexmaindiv{height:185px;width:750px; position:relative;}
div.indexmaindiv1{margin-top:25px;padding-top: 55px; padding-left: 72px;}
div.indexmaindiv1 div.stylesgoleft{float:left; position:absolute; z-index:9; left:55px; top:98px;width:21px;height:28px;background:url('/images/arrowhead.png') no-repeat left top;cursor:pointer;}
div.indexmaindiv1 div.stylesgoleft:hover{float:left; position:absolute; z-index:9; left:55px; top:98px;width:21px;height:28px;background:url('/images/arrowhead.png') no-repeat left -28px;cursor:pointer;}
div.indexmaindiv1 div.playerdetail{width:150px;height:160px;font-family:'微软雅黑';}
div.indexmaindiv1 div.playerdetail div.detailimg{width:150px;height:120px;}
div.indexmaindiv1 div.playerdetail div.detailimg img{width:150px;height:120px;}
div.indexmaindiv1 div.stylesgoright{float:left; position:absolute; z-index:9; right:-40px; top:98px;width:21px;height:28px;background:url('/images/arrowhead.png') no-repeat left -56px;cursor:pointer;}
div.indexmaindiv1 div.stylesgoright:hover{float: position:absolute; z-index:9; right:-40px; top:98px;width:21px;height:28px;background:url('/images/arrowhead.png') no-repeat left -84px;cursor:pointer;}
/*滚动*/
div.maindiv1{float:left;width:700px;height:160px;overflow:hidden;position:relative;    }
div.maindiv1 ul{position:absolute;left:0;top:0;}
div.maindiv1 ul li{float:left;width:150px;height:160px;margin-left:20px;}
</style>
<!--导航结束-->
<!--内容开始-->
	<div class="content_index">
<!--内容一-->
	<!--轮播图-->
    	<div class="banner" id="b02">
    		<ul>
        		<%for (var i=0;i<banner.length;i++){%>
                <li><img src="<%= locals.baseUrl%><%= banner[i]['pic']%>"></li>
        		<%}%>
            </ul>
        </div>
        <img class=" bg_banner" src="/images/bg_bannder.png">
		<script>
        $(document).ready(function(e) {
            $('#b02').unslider();
        });
        </script>
	<!--轮播图-->
    <!--右侧内容-->
        <div class="right_index">
        	<img class="wid_100" src="/images/right_index.png">
        </div>
        <div class="clearfix"></div>
	<!--右侧内容-->
<!--内容一--> 
<!--内容二--> 
		<div class="tip_div">
        	<div class="tip_left">
            	<a  href="/about?article_id=<%= article['article_id']%>">
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<%= article['c_summary']%>
                </a>
            </div>
            <img src="<%= locals.baseUrl%><%= article['pic']%>">
            <div class="clearfix"></div>
        </div>
<!--内容二--> 
<!--内容三--> 
		<div class="products_index">
        	<!-- <div class="products_div"> -->
                <!-- <%for (var i=0;i<product.length;i++){%> -->
            	<!-- <a href="/porduct_details?product_id=<%= product[i]['goods_id']%>"><img src="<%= locals.baseUrl%><%= product[i]['pic']%>"></a> -->
                <!-- <%}%> -->
                <!-- <div class="clearfix"></div> -->
            <!-- </div> -->
			<div class="indexmaindiv" id="indexmaindiv">
	<div class="indexmaindiv1 clearfix" >
		<div class="stylesgoleft" id="goleft"></div>
		<div class="maindiv1 " id="maindiv1">
		<ul id="count1">
			<%for (var i=0;i<product.length;i++){%> 
			<li>
				<div class="playerdetail">
					<div class="detailimg">
						  <a href="/porduct_details?product_id=<%= product[i]['goods_id']%>"><img src="<%= locals.baseUrl%><%= product[i]['pic']%>"></a>
					</div>
				</div>
			</li>
			 <%}%> 

		</ul>
		</div>
		<div class="stylesgoright" id="goright"></div>
	</div>
</div>
        </div>
<!--内容三--> 
    </div>
<!--内容结束-->

</div>

<%include footer.ejs %> 